/* hooks组件示例 */
import { react, useState } from 'react';

function Page001c02() {
  let [name, setName] = useState('boxue');
  function changeName1() {
    setName('boxue' + Math.random());
  }
  function changeName2(a, str, e) {
    setName(str);
    console.log('changeName2', e);
  }
  function changeName3(str, e) {
    setName(str);
    console.log('changeName3', e);
  }

  let [randomNum, setRandomNum] = useState(0);
  function RandomCallback() {
    if (randomNum > 0.9) {
      return <div>优</div>;
    } else if (randomNum > 0.7) {
      return <div>良</div>;
    } else if (randomNum > 0.6) {
      return <div>中</div>;
    } else {
      return <div>差</div>;
    }
  }
  function changeRandom() {
    setRandomNum(Math.random());
  }

  let [arr] = useState([
    { name: 'boxue1', age: 18, id: 1 },
    { name: 'boxue2', age: 19, id: 2 },
    { name: 'boxue3', age: 20, id: 3 },
  ]);
  return (
    <>
      <div>
        {/* 普通设置值的调用 */}
        <h1>{name}</h1>
        <button onClick={changeName1}>改变name</button>
        <button onClick={changeName2.bind(this, 'newName', 'event')}>
          改变name
        </button>
        {/* <button onClick={changeName2.bind(null, 'newName', e)}>改变name</button> */}
        <button onClick={(e) => changeName3('箭头函数', e)}>改变name</button>
      </div>

      <div>
        {/* 直接调用函数示例 */}
        {RandomCallback()}
        <button onClick={() => setRandomNum(Math.random())}>
          改变ranmdom(箭头函数)
        </button>
        <button onClick={changeRandom}>改变ranmdom(普通函数)</button>
      </div>

      <div>
        {/* for循环的示例 */}
        {arr.map((item) => {
          return (
            <div key={item.id}>
              {item.id}--{item.name}--{item.age}
            </div>
          );
        })}
      </div>
    </>
  );
}

export default Page001c02;
